<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="myCanvas" width="300" height="200"></canvas>
    <span id="dingwei">(x,y)</span>
</body>

</html>

<script>

    let co = document.getElementById("myCanvas")
    co.onmousemove = function (e) {
        // console.log(2)
        document.getElementById("dingwei").innerHTML = `(${e.offsetX},${e.offsetY})`
    }
    // 长方形
    var cv = co.getContext("2d")
    cv.fillStyle = "#3399ff "
    cv.fillRect(1, 1, 150, 45)

    // 线段
    cv.moveTo(20, 0)
    cv.lineTo(230, 100)
    cv.stroke()

    // 园
    cv.arc(150, 40, 30, 0, 2 * Math.PI)
    cv.stroke()

    // 实体字
    cv.font = "30px 迷你简中倩"
    cv.fillText('井之上泷奈', 30, 130)

    // 镂空字
    cv.font = "30px 迷你简中倩"
    cv.strokeText('錦木千束', 30, 170)

    // 线性渐变

    var grd = cv.createLinearGradient(0, 0, 300, 0)
    grd.addColorStop(0, 'deepskyblue')
    grd.addColorStop(1, "pink")

    cv.fillStyle = grd
    cv.fillRect(0, 0, 300, 200);


    // 径向渐变
    var grd = cv.createRadialGradient(75, 50, 5, 90, 60, 100)
    grd.addColorStop(0, 'deepskyblue')
    grd.addColorStop(1, "pink")

    cv.fillStyle = grd
    cv.fillRect(0, 0, 300, 200);


    var img = document.getElementById("scream");
    cv.drawImage(img, 10, 10);
</script>


<style>
    * {
        padding: 0;
        margin: 0;
    }

    #myCanvas {
        border: 1px solid pink;
    }
</style>